<template>
    <view class="map">
        <map id="my-map" ref="my-map" class="my-map" :style="{ height: allScreen - 44 + 'px' }" :latitude="myLatitude"
            :longitude="myLongitude" :markers="markers" enable-3D="true" show-compass="true" show-location="true"
            :polyline="myPolyline"></map>
        <!-- 样式里减44px是因为默认的导航栏高度为44px -->
        <!-- <view class="control-btn">
            <view class="location" @tap="locationClick">
                <image class="control-btn-location-img" src="../../static/imgs/location.png"></image>
            </view>
            <view class="assemble" @tap="generateRandomMarkers">
                <image class="control-btn-assemble-img" src="../../static/imgs/assemble.png"></image>
               
            </view>
            <view class="weather">
                <image :src="weatherImg" class="weather-img"></image>
                <view class="wearth-txt">{{ temperature + '℃' }}</view>
            </view>
        </view> -->
    </view>
</template>

<script>
var amapFile = require('./amap-wx.130.js');

export default {
    data() {
        return {
            // id: 0,
            allScreen: '',
            myLatitude: '41.73350802951389', //纬度
            myLongitude: '123.4474986436632', //经度
            markers: [

            ],
            weather: '',//天气
            temperature: '',//温度
            myPolyline: []//路线
        };
    },
    onLoad() {
        let that = this;
        var myAmapFun = new amapFile.AMapWX({ key: '753268226e041b298c13be7ea4e93acf' });
        that.getMyLocation();
        uni.getSystemInfo({
            success: function (e) {
                that.allScreen = e.screenHeight;
            },
            fail: function (e) {
                console.log(e);
            }
        });
        myAmapFun.getWeather({
            success: function (data) {
                that.weather = data.weather.data;
                that.temperature = data.temperature.data;
                console.log(data.weather.data);
            },
            fail: function (info) {
                //失败回调
                console.log(info);
            }
        });



    },
    onReady: function (res) {
        this.mapContext = uni.createMapContext('my-map', this);
    },
    methods: {
        generateRandomNumber(min, max) {
            // Math.random() 返回一个0到1之间的随机数
            // (max - min) 确保随机数覆盖到最大值
            // 加上min后将随机数的范围调整到 min 到 max 之间
            var randomNumber = Math.random() * (max - min) + min;

            // 使用 toFixed(4) 将结果四舍五入到小数点后四位
            return randomNumber.toFixed(4);
        },
        generateRandomMarkers(min, max) {
            const centerLatitude = this.myLatitude; // 中心点纬度
            const centerLongitude = this.myLongitude; // 中心点经度
            const radius = 0.003; // 大约对应 3 公里范围

            let markerList = [];
            for (let i = 0; i < 30; i++) { // 生成 10 个随机标记
                const bs = this.generateRandomNumber(min, max);
                console.log('bs', bs)
                const randomLat = centerLatitude + (Math.random() - 0.5) * 2 * radius;
                const randomLng = centerLongitude + (Math.random() - 0.5) * 2 * radius;
                markerList.push({
                    id: i,
                    latitude: randomLat,

                    longitude: randomLng,
                    width: 30,
                    height: 30,
                    iconPath: 'https://ztapp-1304966785.cos.ap-nanjing.myqcloud.com/%E5%AE%9A%E4%BD%8D%E7%82%B9.png', // 标记图标路径
                    label: {
                        content: '`' + bs,  //文本
                        color: '#36ab60',  //文本颜色
                        borderRadius: 3,  //边框圆角
                        borderWidth: 1,  //边框宽度
                        borderColor: '#36ab60',  //边框颜色
                        bgColor: '#ffffff',  //背景色
                        padding: 5,  //文本边缘留白
                        textAlign: 'center'  //文本对齐方式。有效值: left, right, center
                    },

                });
            }
            this.markers = markerList;
            this.$set(this, 'markers', markerList);
            this.$forceUpdate();
            console.log('this.markers', this.markers)
        },
        getRoute() {
            let that = this;
            var myAmapFun = new amapFile.AMapWX({ key: '753268226e041b298c13be7ea4e93acf' });
            that.mapContext.includePoints({//缩放视野展示所有经纬度
                points: [{
                    latitude: that.myLatitude,
                    longitude: that.myLongitude
                }, {
                    latitude: that.makers[0].latitude,
                    longitude: that.makers[0].longitude
                }]
            })
            var myLocal = that.myLongitude + ',' + that.myLatitude
            var target = that.makers[0].longitude + ',' + that.makers[0].latitude
            myAmapFun.getWalkingRoute({//获取步行线路
                origin: myLocal,
                destination: target,
                success: function (data) {
                    console.log(data);
                    //获取线路规划的数据，后面还需要在地图上画出来，未完成，完成后会发新博客
                },
                fail: function (info) {
                    console.log(info);
                }
            });
        },
        getMyLocation() {
            let that = this;
            uni.getLocation({
                type: 'gcj02',
                success: function (res) {
                    console.log('getMyLocation', res)
                    that.myLatitude = res.latitude;
                    that.myLongitude = res.longitude;
                    console.log('myLatitude为' + that.myLatitude);
                    console.log('myLongitude为' + that.myLongitude);
                    that.getCityName(that.myLatitude, that.myLongitude)
                    //that.generateRandomMarkers();
                },
                fail: function (e) {
                    console.log(e);
                }
            });
        },
        getCityName(latitude, longitude) {
            // 这里以腾讯地图为例，需要替换为你的腾讯地图API Key
            const apiKey = 'IXBBZ-HHSK3-UWW3K-3DB6K-M7Y5K-F4FM5';
            const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${apiKey}`;

            uni.request({
                url: url,
                success: (res) => {
                    console.log('getCityName', res)
                    if (res.data.status === 0) {
                        this.address = res.data.result.address;
                        const city = res.data.result.address_component.city;
                        this.city = city;
                        uni.request({
                            url: "https://zhangteng.cloud:5001/api/City/GetCity?city=" + city,
                            success: (res) => {

                                console.log('GetCity', res)
                                this.generateRandomMarkers(res.data.min, res.data.max);
                            },
                            fail: () => {

                            }
                        });
                    } else {

                    }

                },
                fail: () => {

                }
            });
        },
        locationClick() {
            console.log('location');
            let that = this;
            that.getMyLocation();
            that.mapContext.moveToLocation({
                longitude: that.myLongitude,
                latitude: that.myLatitude,
                success: function (res) {
                    console.log('刷新成功');
                },
                fail: function (e) {
                    console.log('调用失败');
                    console.log(e);
                },
                complete: function () {
                    console.log('调用结束');
                }
            });
        },
        assembleClick() {
            uni.chooseLocation({
                success: function (res) {
                    console.log('位置名称：' + res.name);
                    console.log('详细地址：' + res.address);
                    console.log('纬度：' + res.latitude);
                    console.log('经度：' + res.longitude);
                }
            });
        }
    },
    computed: {
        weatherImg: function () {
            //返回天气图片，未完善
            //全部天气类型在https://lbs.amap.com/api/webservice/guide/tools/weather-code/
            switch (this.weather) {
                case '晴':
                    return 'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/clear-day.svg';
                    break;
                case '多云':
                    return 'https://zt-1304966785.cos.ap-nanjing.myqcloud.com/cloudy.svg';
                    break;
                default:
                    return 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-tourism/fd34fa20-797a-11ea-b94e-47f67ecf8268.png';
            }
        }
    }
};
</script>

<style scoped>
/* nvue好像不能用scss */
.my-map {
    width: 750rpx;
}

.control-btn {
    position: fixed;
    flex-direction: column;
    top: 400rpx;
    left: 20rpx;
    align-items: center;
    /* background-color: #f00; */
}

.location {
    margin-bottom: 30rpx;
    flex-direction: column;
    align-items: center;
}

.assemble {
    flex-direction: column;
    align-items: center;
}

.control-btn-location-img {
    width: 60rpx;
    height: 60rpx;
}

.control-btn-assemble-img {
    width: 80rpx;
    height: 80rpx;
}

.control-btn-txt {
    font-size: 19rpx;
    text-align: center;
}

.weather {
    position: fixed;
    bottom: 10rpx;
    right: 50rpx;
    background-color: #fff;
    flex-direction: row;
    align-items: center;
}

.weather-img {
    width: 50rpx;
    height: 50rpx;
}

.wearth-txt {
    color: #999999;
    font-size: 32rpx;
}
</style>
